/**
 *jsx语法规则
 * 1. 定义虚拟DOM时,不要用引号
 * 2. 标签中混入js表达式用使用{}
 * 3. 样式的类名不要写class,要写className
 * 4. 内联样式,要用style={{key:value}} 的形式去写
 * 5. 只有一个根标签
 * 6. 标签必须闭合
 * 7. 标签首字符
 *     - 若首字母小写,则将标签转为HTML中同名元素,若HTML中无该标签对应的同名元素,则报错
 *     - 若首字母大写,react就去渲染对应组件,如果组件不存在,则报错.
 */
const myId='aTgUiGu';
const myData='HelLo,ReACt'
// 创建虚拟dom
const VDOM=(
	<h1 id={myId.toLowerCase()} className="title">
		<span style={{color:'white',fontSize:"20px"}}>{myData.toLowerCase()}</span>
		<span style={{color:'red',fontSize:"20px"}}>{myData.toUpperCase()}</span>
		<input type="text"/>
	</h1>
)
// 2渲染页面
ReactDOM.render(VDOM,document.getElementById("test"))
